<template>
  <!-- 修改报警规则模态框 -->
  <el-dialog
    :title="$t('dialog.title.editor_warning')"
    :visible.sync="DialogShow"
    width="40%"
    :before-close="closeDialog"
  >
    <span class="main"
      ><el-form
        ref="form"
        :label-position="labelPosition"
        label-width="150px"
        :model="form"
        :show-message="false"
        style="width: 90%"
        :rules="rules"
      >
        <el-form-item :label="$t('dialog.form.info')" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item
          v-if="isShow"
          :label="$t('dialog.form.low')"
          prop="value_range_start"
        >
          <el-input v-model="form.value_range_start"></el-input>
        </el-form-item>
        <el-form-item
          v-show="isShow"
          :label="$t('dialog.form.high')"
          prop="value_range_end"
        >
          <el-input v-model="form.value_range_end"></el-input>
        </el-form-item>
        <el-form-item
          v-show="!isShow"
          :label="$t('dialog.form.time')"
          prop="value_range_end"
        >
          <el-select
            v-model="form.value_range_end"
            :placeholder="$t('dialog.form.time_options.select')"
          >
            <el-option
              :label="$t('dialog.form.time_options.val1')"
              value="1"
            ></el-option>
            <el-option
              :label="$t('dialog.form.time_options.val2')"
              value="3"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('dialog.form.rule')" prop="type">
          <el-select
            v-model="form.type"
            :placeholder="$t('dialog.form.time_options.select')"
            @change="selectChanege"
          >
            <el-option
              :label="$t('dialog.form.rule_options.val1')"
              value="1"
            ></el-option>
            <el-option
              :label="$t('dialog.form.rule_options.val2')"
              value="2"
            ></el-option>
            <el-option
              :label="$t('dialog.form.rule_options.val3')"
              value="3"
            ></el-option>
            <el-option
              :label="$t('dialog.form.rule_options.val4')"
              value="4"
            ></el-option>
            <el-option
              :label="$t('dialog.form.rule_options.val5')"
              value="5"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">{{ $t("dialog.btn.cancel") }}</el-button>
      <el-button type="primary" @click="addPersonnel" style="width: 200px">{{
        $t("dialog.btn.save")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["DialogShow", "form"],
  data() {
    return {
      isShow: true,
      labelPosition: "right",
      // 创建人员表单数据
      // 验证规则
      // 验证规则
      rules: {
        name: [
          {
            required: true,
            trigger: "blur",
            message: "告警信息不能为空",
          },
        ],
        value_range_start: [
          {
            required: true,
            trigger: "blur",
            message: "最低数值不能为空",
          },
        ],
        value_range_end: [
          {
            required: true,
            trigger: "blur",
            message: "最高数值不能为空",
          },
        ],
        type: [
          {
            required: true,
            trigger: "blur",
            message: "规则不能不选",
          },
        ],
      },
    };
  },
  methods: {
    // 提交爬虫
    addPersonnel() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.$http
          .post("/business/warning/rule/create", this.form)
          .then((res) => {
            console.log(res);
            if (res.status == 200) {
              this.$refs.form.resetFields();
              this.$message.success("Modify the success!");
              this.closeDialog("1");
            } else {
              this.$message.error("Modify the failure!");
            }
          });
      });
    },
    // 当选择发生变化
    selectChanege(val) {
      if (val == 5) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
    // 关闭弹出框
    closeDialog(t) {
      this.$emit("closeDialog", t);
    },
  },
};
</script>

<style lang='less' scoped>
</style>